<template>
  <div class="wrapper-ques-item">
    <div class="wrapper-ques-item-hd">
      <p class="wrapper-ques-item-title">
        {{ title }}
      </p>
    </div>
    <div class="wrapper-ques-item-options">
      <a-checkbox-group v-model="selectKeys" direction="vertical" :style="{ marginBottom: '16px' }" @change="handleChange">
        <template v-for="item in options" :key="item">
          <a-checkbox :value="item.index"  :style="{ marginBottom: '16px' }">
            <template #checkbox="{ checked }">
              <a-space align="start" class="custom-checkbox-card" :class="{ 'custom-checkbox-card-checked': checked }">
                <div class="custom-checkbox-card-mask">
                  <div class="custom-checkbox-card-mask-dot">{{ item.index }}</div>
                </div>
                <a-typography-text type="secondary"> {{ item.content }}</a-typography-text>
              </a-space>
            </template>
          </a-checkbox>
        </template>
      </a-checkbox-group>
    </div>
  </div>
</template>

<script setup>

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  options: {
    type: Array,
    required: true,
    default: () => [],
  },
  answer: {
    type: [String, Object, Number],
    required: true,
  },
  // 回显正确答案
  showTrueAnswer: {
    type: Boolean,
    default: false,
  },
});

const selectKeys = ref([])

const handleChange = (val) => {
  // 若回显正确答案，禁止选中其他项
  if(props.showTrueAnswer) {
    selectKeys.value = props.answer
  }
}

onBeforeMount(() => {
  props.showTrueAnswer &&  (selectKey.value = props.answer)
})
</script>

<style lang="less" scoped>

.arco-checkbox-group {
  width: 100%;
}
  
.custom-checkbox-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  width: 80%;
  box-sizing: border-box;
}

.custom-checkbox-card-mask {
  height: 22px;
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-checkbox-card-mask-dot {
  font-size: 12px;
}

.custom-checkbox-card-title {
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: bold;
}

.custom-checkbox-card:hover,
.custom-checkbox-card-checked,
.custom-checkbox-card:hover .custom-checkbox-card-mask,
.custom-checkbox-card-checked .custom-checkbox-card-mask {
  border-color: rgb(var(--primary-4));
}

.custom-checkbox-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-checkbox-card:hover .custom-checkbox-card-title,
.custom-checkbox-card-checked .custom-checkbox-card-title {
  color: rgb(var(--primary-6));
}

.custom-checkbox-card-checked .custom-checkbox-card-mask {
  background-color: rgb(var(--primary-2));
}
.custom-checkbox-card-checked .custom-checkbox-card-mask-dot {
  color: rgb(var(--primary-6));
}
</style>
